<template>
  <div class="components-container">
    <aside><strong>SplitPane</strong> If you've used
      <a href="https://codepen.io/" target="_blank"> codepen</a>,
      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
    </aside>
    <splitpanes @resize="resize">
      <pane class="left-container">
        1
      </pane>
      <pane>
        <splitpanes horizontal>
          <pane class="top-container">
            2
          </pane>
          <pane class="bottom-container">
            3
          </pane>
        </splitpanes>
      </pane>
    </splitpanes>
  </div>
</template>

<script>
export default {
  name: 'SplitpaneDemo'
}
</script>

<script setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

const resize = () => {
  console.log('resize')
}
</script>

<style scoped>
.components-container {
  position: relative;
  height: 100vh;
  font-size: 40px;
  text-align: center;
  color: #ffffff;
}

.left-container {
  background-color: #F38181;
  height: 100%;
}

.right-container {
  background-color: #FCE38A;
  height: 200px;
}

.top-container {
  background-color: #FCE38A;
  width: 100%;
  height: 100%;
}

.bottom-container {
  width: 100%;
  background-color: #95E1D3;
  height: 100%;
}
</style>
